import React, { Suspense } from "react";
import { Navigate, createBrowserRouter } from "react-router-dom";
import Home from "../pages/Layout/index";
// import Login from "../pages/Login/index";
// import Article from "../pages/Layout/components/article";
// import Dashboard from "../pages/Layout/components/dashboard";
// import Publish from "../pages/Layout/components/publish";
import PrivateRoute from "../utils/history";

//导入页面组件
const Login = React.lazy(() => import("../pages/Login/index"));
// const Layout = lazy(() => import("../pages/Layout/index"));
const Article = React.lazy(() => import("../pages/Layout/components/article"));
const Dashboard = React.lazy(() =>
  import("../pages/Layout/components/dashboard")
);
const Publish = React.lazy(() => import("../pages/Layout/components/publish"));
let router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to={"/home"}></Navigate>,
  },
  {
    path: "/error",
    element: <Navigate to={"/login"}></Navigate>,
  },
  {
    path: "/home",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Navigate to={"/home/dashboard"}></Navigate>
      </Suspense>
    ),
  },
  {
    path: "/home",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <PrivateRoute component={Home}></PrivateRoute>
      </Suspense>
    ),
    handle: {
      title: "首页",
      path: "/home",
    },
    children: [
      {
        path: "/home/article",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Article></Article>
          </Suspense>
        ),

        handle: {
          title: "内容管理",
          path: "/home/article",
        },
      },
      {
        path: "/home/dashboard",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Dashboard></Dashboard>
          </Suspense>
        ),
        handle: {
          title: "数据面板",
          path: "/home/dashboard",
        },
      },
      {
        path: "/home/publish",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Publish></Publish>
          </Suspense>
        ),
        handle: {
          title: "发布文章",
          path: "/home/publish",
        },
      },
    ],
  },
  {
    path: "/login",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Login></Login>
      </Suspense>
    ),
  },
]);

export default router;
